<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2023-09-04 14:52:13
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-07-31 14:38:22
 * @FilePath: /things-admin/src/view/dataScreen/components/middle_left/middle.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="vip_info">
    <div class="title">
      <span>会员信息</span>
      <img src="../../images/cope.png" alt="" @click.stop="open" />
    </div>
    <div class="sex">
      <div id="echarts_three"></div>
      <img class="sex_boy" src="../../images/581@2x.png" alt="" />
      <img class="sex_girl" src="../../images/580@2x.png" alt="" />
      <div class="desc1">{{ total }}</div>
      <div class="desc2">会员总数</div>
    </div>
    <div class="line_chat">
      <div id="echarts_four"></div>
      <div id="echarts_five"></div>
      <div class="pie_chat">
        <div class="top_pie_chat">
          <div id="echarts_six"></div>
          <div id="echarts_seven"></div>
          <div id="echarts_eight"></div>
        </div>
        <div class="bottom_pie_chat">
          <div class="procent_one">兴趣占比</div>
          <div class="procent_two">职业占比</div>
          <div class="procent_three">会员占比</div>
        </div>
      </div>
    </div>
    <div class="tanchuang" v-show="isMask">
      <div class="title">
        <span>会员信息</span>
        <div class="el-icon-circle-close" @click.stop="open"></div>
      </div>
      <div class="sex">
        <div id="echarts_three_copy"></div>
        <img class="sex_boy" src="../../images/581@2x.png" alt="" />
        <img class="sex_girl" src="../../images/580@2x.png" alt="" />
        <div class="desc1">{{ total }}</div>
        <div class="desc2">会员总数</div>
      </div>
      <div class="line_chat">
        <div id="echarts_four_copy"></div>
        <div id="echarts_five_copy"></div>
        <div class="pie_chat">
          <div class="top_pie_chat">
            <div id="echarts_six_copy"></div>
            <div id="echarts_seven_copy"></div>
            <div id="echarts_eight_copy"></div>
          </div>
          <div class="bottom_pie_chat">
            <div class="procent_one">兴趣占比</div>
            <div class="procent_two">职业占比</div>
            <div class="procent_three">会员占比</div>
          </div>
        </div>
      </div>
    </div>
    <div class="mask" v-show="isMask"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  Profession,
  interestStatistics,
  membershipAgeStatistics,
  careerStatistics,
  memberMonthlyStatistics,
  memberProportion
} from "@/base/api/DataScreen.ts";
export default {
  data() {
    return {
      isMask: false,
      data_one: [
        { value: 19735, name: "女" },
        { value: 19980, name: "男" }
      ],
      data_two: [], //会员数据
      data_three: [], //会员兴趣
      data_four: [], //会员人数
      data_five: [], //会员年龄区间
      total: 0, //会员总数
      data_six: [], // 会员增加月份
      data_seven: [], // 会员月增长数
      provinceId: this.provinceId || "", //省份ID
      cityId: this.cityId || "", //城市ID
      name: this.name || "", //城市名称
      data_eight: [] // 游客会员占比
    };
  },
  props: ["provinceId", "cityId", "name"],
  watch: {
    provinceId(newval) {
      this.provinceId = newval;
    },
    cityId(newval) {
      this.cityId = newval;
    },
    name(newval) {
      if (newval) {
        this.name = newval;
        this.interestStatistics();
        this.Profession();
        this.membershipAgeStatistics();
        this.careerStatistics();
      }
    }
  },
  methods: {
    // 开启放大弹窗
    open() {
      this.isMask = !this.isMask;
    },
    //男女比例扇形图
    echartsThree(data, dataone) {
      let myChartThree = echarts.init(
        document.getElementById("echarts_three"),
        null,
        { renderer: "svg" }
      );
      let option = {
        tooltip: {
          trigger: "item"
        },
        series: [
          {
            name: "会员人数",
            type: "pie",
            radius: ["60%", "75%"],
            color: ["#EC5987", "#05D2F7", "#102e1f"],
            label: {
              show: true, // 不显示文字
              formatter: function(params) {
                return params.name + "\n" + params.value + "人";
              },
              overflow: "none",
              textStyle: {
                fontSize: 7
              }
            },
            // 后续还原
            // data: [
            //   { value: dataone[1].num, name: "女" },
            //   { value: dataone[2].num, name: "男" },
            //   { value: dataone[0].num, name: "未知" }
            // ],
            data: [
              { value: dataone[1].num, name: "女" },
              { value: dataone[2].num, name: "男" },
              { value: dataone[0].num, name: "未知" }
            ],
            labelLine: {
              show: true,
              length: 5,
              length2: 5
            }
          }
        ]
      };
      myChartThree.setOption(option);
    },
    //折线图1
    echartsFour() {
      let mtChartFour = echarts.init(
        document.getElementById("echarts_four"),
        null,
        { renderer: "svg" }
      );
      let option = {
        tooltip: {
          trigger: "axis"
        },
        color: ["#2257CE", "#EC5987", "#00C7FC"],
        legend: {
          icon: "circle",
          itemWidth: 4.3,
          itemHeight: 4.3,
          itemGap: 3.5,
          //   top: -5,
          right: 40,
          textStyle: {
            color: "#FFF",
            fontSize: 7,
            fontWeight: "bold"
          },
          data: ["年龄区间人数", "频次", "时长"]
        },
        grid: {
          left: "15%",
          right: "4%",
          bottom: "3%",
          top: "18%",
          containLabel: true
        },
        xAxis: {
          name: "年龄\n区间",
          nameGap: 20,
          nameLocation: "start",
          type: "category",
          boundaryGap: false,
          data: this.data_five,
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 9, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "top"
          },

          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 10
            }
          }
        },
        yAxis: {
          name: "数量",
          nameLocation: "end",
          nameGap: 5, // 调节名称与轴线的距离
          type: "value",
          position: "right",
          axisLabel: {
            interval: 0, // 强制显示所有标签
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 10
            }
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 9, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "top"
          },
          splitLine: {
            show: false // 隐藏y轴分隔线
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: "年龄区间人数",
            type: "line",
            stack: "Total",
            symbol: "circle",
            data: this.data_four
          }
          // {
          //   name: "频次",
          //   type: "line",
          //   stack: "Total",
          //   symbol: "circle",
          //   data: [20, 18, 11, 24, 20, 10, 30],
          // },
          // {
          //   name: "时长",
          //   type: "line",
          //   stack: "Total",
          //   symbol: "circle",
          //   data: [15, 22, 21, 14, 19, 30, 100],
          // },
        ]
      };
      mtChartFour.setOption(option);
    },

    //折线图2
    echartsFive() {
      let mtChartFive = echarts.init(
        document.getElementById("echarts_five"),
        null,
        { renderer: "svg" }
      );
      let option = {
        color: ["#2257CE"],
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: "10%",
          right: "4%",
          bottom: "3%",
          top: "18%",
          containLabel: true
        },
        xAxis: {
          name: "\n月份",
          nameLocation: "start",
          nameGap: 10, // 调节名称与轴线的距离
          type: "category",
          data: this.data_six,
          axisLabel: {
            interval: 0, // 强制显示所有标签
            rotate: 30,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 10
            }
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 9, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "top"
          },
          axisLine: {
            show: false // 隐藏y轴轴线
          },
          axisTick: {
            show: false
          },
          //   axisLabel: {
          //     show: false,
          //   },
          splitLine: {
            show: false // 隐藏y轴分隔线
          }
        },
        yAxis: {
          name: "会员\n增长",
          type: "value",
          axisLine: {
            show: false // 隐藏y轴轴线
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false // 隐藏y轴分隔线
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 9, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "top"
          }
        },
        series: [
          {
            data: this.data_seven,
            type: "line",
            symbol: "circle"
          }
        ]
      };
      mtChartFive.setOption(option);
    },
    echartsSix() {
      let myChartSix = echarts.init(
        document.getElementById("echarts_six"),
        null,
        { renderer: "svg" }
      );
      myChartSix.resize({
        width: "120px",
        height: "120px"
      });
      let option = {
        tooltip: {
          trigger: "item"
        },
        series: [
          {
            name: "兴趣占比",
            type: "pie",
            radius: "50%",
            labelLine: {
              show: false
            },
            label: {
              position: "inner",
              fontSize: 8,
              formatter: function(params) {
                return params.name + "\n" + +Math.round(params.percent) + "%";
              }
            },

            data: this.data_three
          }
        ]
      };
      myChartSix.setOption(option);
    },
    echartsSeven() {
      let myChartSeven = echarts.init(
        document.getElementById("echarts_seven"),
        null,
        { renderer: "svg" }
      );
      myChartSeven.resize({
        width: "120px",
        height: "120px"
      });
      let option = {
        tooltip: {
          trigger: "item"
        },
        series: [
          {
            name: "职业占比",
            type: "pie",
            radius: "50%",
            labelLine: {
              show: false
            },
            label: {
              position: "inner",
              fontSize: 8,
              formatter: function(params) {
                return params.name + "\n" + Math.round(params.percent) + "%";
              }
            },
            data: this.data_two || []
          }
        ]
      };
      myChartSeven.setOption(option);
    },
    echartsEight() {
      let myChartEight = echarts.init(
        document.getElementById("echarts_eight"),
        null,
        { renderer: "svg" }
      );
      myChartEight.resize({
        width: "120px",
        height: "120px"
      });
      let option = {
        tooltip: {
          trigger: "item"
        },
        series: [
          {
            name: "会员占比",
            type: "pie",
            radius: "50%",
            labelLine: {
              show: false
            },
            label: {
              position: "inner",
              fontSize: 8,
              formatter: function(params) {
                return params.name + "\n" + Math.round(params.percent) + "%";
              }
            },
            data: this.data_eight
          }
        ]
      };
      myChartEight.setOption(option);
    },
    //男女比例扇形图
    echartsThreeCopy(data, dataone) {
      let myChartThree = echarts.init(
        document.getElementById("echarts_three_copy"),
        null,
        { renderer: "svg" }
      );
      let option = {
        tooltip: {
          trigger: "item"
        },
        series: [
          {
            name: "会员人数",
            type: "pie",
            radius: ["60%", "75%"],
            color: ["#EC5987", "#05D2F7", "#102e1f"],
            label: {
              show: true, // 不显示文字
              formatter: function(params) {
                return params.name + "\n" + params.value + "人";
              },
              overflow: "none",
              textStyle: {
                fontSize: 7
              }
            },
            // 后续还原
            // data: [
            //   { value: dataone[1].num, name: "女" },
            //   { value: dataone[2].num, name: "男" },
            //   { value: dataone[0].num, name: "未知" }
            // ],
            data: [
              { value: dataone[1].num, name: "女" },
              { value: dataone[2].num, name: "男" },
              { value: dataone[0].num, name: "未知" }
            ],
            labelLine: {
              show: true,
              length: 5,
              length2: 5
            }
          }
        ]
      };
      myChartThree.setOption(option);
    },
    //折线图1
    echartsFourCopy() {
      let mtChartFour = echarts.init(
        document.getElementById("echarts_four_copy"),
        null,
        { renderer: "svg" }
      );
      let option = {
        tooltip: {
          trigger: "axis"
        },
        color: ["#2257CE", "#EC5987", "#00C7FC"],
        legend: {
          icon: "circle",
          itemWidth: 4.3,
          itemHeight: 4.3,
          itemGap: 3.5,
          //   top: -5,
          right: 40,
          textStyle: {
            color: "#FFF",
            fontSize: 7,
            fontWeight: "bold"
          },
          data: ["年龄区间人数", "频次", "时长"]
        },
        grid: {
          left: "15%",
          right: "4%",
          bottom: "3%",
          top: "18%",
          containLabel: true
        },
        xAxis: {
          name: "年龄\n区间",
          nameGap: 24,
          nameLocation: "start",
          type: "category",
          boundaryGap: false,
          data: this.data_five,
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 9, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "top"
          },

          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 10
            }
          }
        },
        yAxis: {
          name: "数量",
          nameLocation: "end",
          nameGap: 5, // 调节名称与轴线的距离
          type: "value",
          position: "right",
          axisLabel: {
            interval: 0, // 强制显示所有标签
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 10
            }
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 9, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "top"
          },
          splitLine: {
            show: false // 隐藏y轴分隔线
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: "年龄区间人数",
            type: "line",
            stack: "Total",
            symbol: "circle",
            data: this.data_four
          }
          // {
          //   name: "频次",
          //   type: "line",
          //   stack: "Total",
          //   symbol: "circle",
          //   data: [20, 18, 11, 24, 20, 10, 30],
          // },
          // {
          //   name: "时长",
          //   type: "line",
          //   stack: "Total",
          //   symbol: "circle",
          //   data: [15, 22, 21, 14, 19, 30, 100],
          // },
        ]
      };
      mtChartFour.setOption(option);
    },

    //折线图2
    echartsFiveCopy() {
      let mtChartFive = echarts.init(
        document.getElementById("echarts_five_copy"),
        null,
        { renderer: "svg" }
      );
      let option = {
        color: ["#2257CE"],
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: "10%",
          right: "4%",
          bottom: "3%",
          top: "18%",
          containLabel: true
        },
        xAxis: {
          name: "\n月份",
          nameLocation: "start",
          nameGap: 0, // 调节名称与轴线的距离
          type: "category",
          data: this.data_six,
          axisLabel: {
            interval: 0, // 强制显示所有标签
            rotate: 30,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 10
            }
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 9, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "top"
          },
          axisLine: {
            show: false // 隐藏y轴轴线
          },
          axisTick: {
            show: false
          },
          //   axisLabel: {
          //     show: false,
          //   },
          splitLine: {
            show: false // 隐藏y轴分隔线
          }
        },
        yAxis: {
          name: "会员\n增长",
          type: "value",
          axisLine: {
            show: false // 隐藏y轴轴线
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false // 隐藏y轴分隔线
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 9, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "top"
          }
        },
        series: [
          {
            data: this.data_seven,
            type: "line",
            symbol: "circle"
          }
        ]
      };
      mtChartFive.setOption(option);
    },
    echartsSixCopy() {
      let myChartSix = echarts.init(
        document.getElementById("echarts_six_copy"),
        null,
        { renderer: "svg" }
      );
      myChartSix.resize({
        width: "120px",
        height: "120px"
      });
      let option = {
        tooltip: {
          trigger: "item"
        },
        series: [
          {
            name: "兴趣占比",
            type: "pie",
            radius: "50%",
            labelLine: {
              show: false
            },
            label: {
              position: "inner",
              fontSize: 8,
              formatter: function(params) {
                return params.name + "\n" + +Math.round(params.percent) + "%";
              }
            },

            data: this.data_three
          }
        ]
      };
      myChartSix.setOption(option);
    },
    echartsSevenCopy() {
      let myChartSeven = echarts.init(
        document.getElementById("echarts_seven_copy"),
        null,
        { renderer: "svg" }
      );
      myChartSeven.resize({
        width: "120px",
        height: "120px"
      });
      let option = {
        tooltip: {
          trigger: "item"
        },
        series: [
          {
            name: "职业占比",
            type: "pie",
            radius: "50%",
            labelLine: {
              show: false
            },
            label: {
              position: "inner",
              fontSize: 8,
              formatter: function(params) {
                return params.name + "\n" + Math.round(params.percent) + "%";
              }
            },
            data: this.data_two || []
          }
        ]
      };
      myChartSeven.setOption(option);
    },
    echartsEightCopy() {
      let myChartEight = echarts.init(
        document.getElementById("echarts_eight_copy"),
        null,
        { renderer: "svg" }
      );
      myChartEight.resize({
        width: "120px",
        height: "120px"
      });
      let option = {
        tooltip: {
          trigger: "item"
        },
        series: [
          {
            name: "会员占比",
            type: "pie",
            radius: "50%",
            labelLine: {
              show: false
            },
            label: {
              position: "inner",
              fontSize: 8,
              formatter: function(params) {
                return params.name + "\n" + Math.round(params.percent) + "%";
              }
            },
            data: this.data_eight
          }
        ]
      };
      myChartEight.setOption(option);
    },

    //会员数据
    Profession() {
      Profession(this.provinceId, this.cityId).then(res => {
        this.data_two = [];
        this.total = 0;
        res.data.forEach((item, index) => {
          this.total += item.num;
          this.data_two.push(item)
        });
        this.total = this.total
          .toString()
          .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
       
        this.echartsThree(this.total, this.data_two);
        this.echartsThreeCopy(this.total, this.data_two);
      });
    },
    //会员职业数据
    careerStatistics() {
      careerStatistics(this.provinceId, this.cityId).then(res => {
        res.data.forEach((item, index) => {
          if (index > 3) return false;
          var obj = {};
          obj.value = item.count;
          obj.name = item.labelname;
          this.data_two.push(obj);
        });
        this.echartsSeven();
        this.echartsSevenCopy();
      });
    },
    //会员兴趣占比
    interestStatistics() {
      interestStatistics(this.provinceId, this.cityId).then(res => {
        // console.log(res,'-----------会员兴趣占比');
        this.data_three = [];
        res.data.forEach((item, index) => {
          if (index > 3) return false;
          var obj = {};
          obj.value = item.count;
          obj.name = item.labelname;
          this.data_three.push(obj);
        });
        this.echartsSix();
        this.echartsSixCopy();
      });
    },
    //会员年龄统计
    membershipAgeStatistics() {
      membershipAgeStatistics(this.provinceId, this.cityId).then(res => {
        // console.log(res, "------------会员年龄统计");
        this.data_four = [];
        this.data_five = [];
        res.data.forEach(item => {
          this.data_four.push(item.count);
          this.data_five.push(item.ageLevel);
        });
        this.echartsFour();
        this.echartsFourCopy();
      });
    },
    // 会员月增长统计
    memberMonthlyStatistics() {
      this.data_six = [];
      this.data_seven = [];
      memberMonthlyStatistics().then(res => {
        res.data.forEach(item => {
          this.data_six.push(item.month);
          this.data_seven.push(item.count);
        });
        this.echartsFive();
        this.echartsFiveCopy();
      });
    },
    // 游客会员占比
    memberProportion() {
      memberProportion().then(res => {
        this.data_eight = [];
        let member = {
          name: "会员",
          value: res.data[0].member
        };
        this.data_eight.push(member);
        let tourist = {
          name: "游客",
          value: res.data[0].tourist
        };
        this.data_eight.push(tourist);
        this.echartsEight();
        this.echartsEightCopy();
      });
    }
  },
  mounted() {
    this.Profession();
    this.interestStatistics();
    this.membershipAgeStatistics();
    this.careerStatistics();
    this.memberMonthlyStatistics();
    this.memberProportion();
  }
};
</script>

<style lang="less" scoped>
.vip_info {
  position: relative;
  margin-top: 8px;
  width: 439px;
  height: 399px;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 1px solid #3c5d9e;
  .title {
    width: 439px;
    height: 46px;
    background: url(../../images/Group3533@2x.png) no-repeat;
    background-size: cover;
    display: flex;
    padding: 0 14px 0 21px;
    justify-content: space-between;
    align-items: center;
    img {
      width: 20px;
      height: 20px;
      cursor: pointer;
      position: relative;
      z-index: 100;
    }
    span {
      width: 80px;
      height: 29px;
      font-size: 20px;
      font-weight: 500;
      color: #ffffff;
      line-height: 29px;
    }
  }
  .sex {
    position: relative;
    width: 160px;
    height: 197.7px;
    margin-top: 86px;
    align-items: center;
    display: flex;
    flex-direction: column;
    #echarts_three {
      width: 160px;
      height: 91px;
    }
    .sex_boy {
      width: 11px;
      position: absolute;
      top: 30px;
      left: 68px;
    }
    .sex_girl {
      width: 13.3px;
      position: absolute;
      top: 30px;
      left: 82px;
    }
    .desc1 {
      font-size: 37px;
      font-weight: bold;
      color: #37e8fb;
      line-height: 43px;
      margin-top: -5px;
    }
    .desc2 {
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;
      line-height: 20px;
    }
  }
  .line_chat {
    position: absolute;
    width: 280px;
    height: 399px;
    right: 0;
    top: 0;
    #echarts_four {
      width: 280px;
      margin-top: 51px;
      height: 110px;
    }
    #echarts_five {
      width: 280px;
      margin-top: 5px;
      height: 100px;
    }
    .pie_chat {
      width: 280px;
      margin-top: 6px;
      height: 100px;
      .top_pie_chat {
        width: 280px;
        height: 78px;
        display: flex;
        #echarts_six,
        #echarts_seven,
        #echarts_eight {
          margin-top: -20px;
          margin-left: -15px;
        }
        #echarts_seven {
          margin-left: -25px;
        }
        #echarts_eight {
          margin-left: -25px;
        }
      }
      .bottom_pie_chat {
        width: 280px;
        height: 16px;
        margin-top: 6px;
        display: flex;
        div {
          width: 48px;
          height: 16px;
          font-size: 12px;
          font-weight: 400;
          color: #37e8fb;
          line-height: 16px;
        }
        .procent_one {
          margin-left: 18px;
        }
        .procent_two {
          margin-left: 50px;
        }
        .procent_three {
          margin-left: 50px;
        }
      }
    }
  }
  .mask {
    position: fixed;
    z-index: 99999998;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .tanchuang {
    position: fixed;
    z-index: 99999999;
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    background-color: #0a1632;
    .title {
      width: 100%;
      height: 46px;
      background: url(../../images/Group3533@2x.png) no-repeat;
      background-size: cover;
      display: flex;
      padding: 0 14px 0 21px;
      justify-content: space-between;
      align-items: center;
      div {
        display: inline-block;
        cursor: pointer;
        font-size: 24px;
        font-weight: 500;
        color: #ffffff;
      }
      span {
        width: 80px;
        height: 29px;
        font-size: 20px;
        font-weight: 500;
        color: #ffffff;
        line-height: 29px;
      }
    }
    .sex {
      transform-origin: left top;
      transform: scale(2.2);
      position: relative;
      width: 160px;
      height: 197.7px;
      margin-top: 172px;
      align-items: center;
      display: flex;
      flex-direction: column;
      #echarts_three_copy {
        width: 160px;
        height: 91px;
      }
      .sex_boy {
        width: 11px;
        position: absolute;
        top: 30px;
        left: 68px;
      }
      .sex_girl {
        width: 13.3px;
        position: absolute;
        top: 30px;
        left: 82px;
      }
      .desc1 {
        font-size: 37px;
        font-weight: bold;
        color: #37e8fb;
        line-height: 43px;
        margin-top: -5px;
      }
      .desc2 {
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
        line-height: 20px;
      }
    }
    .line_chat {
      position: absolute;
      width: 280px;
      height: 399px;
      left: 400px;
      top: 0;
      transform-origin: left top;
      transform: scale(1.8);
      #echarts_four_copy {
        width: 480px;
        margin-top: 51px;
        height: 110px;
      }
      #echarts_five_copy {
        width: 480px;
        margin-top: 5px;
        height: 100px;
      }
      .pie_chat {
        width: 280px;
        margin-top: 26px;
        height: 100px;
        .top_pie_chat {
          width: 280px;
          height: 78px;
          display: flex;
          #echarts_six_copy,
          #echarts_seven_copy,
          #echarts_eight_copy {
            margin-top: -20px;
            margin-left: 16px;
          }
          #echarts_seven_copy {
            margin-left: 50px;
          }
          #echarts_eight_copy {
            margin-left: 50px;
          }
        }
        .bottom_pie_chat {
          width: 480px;
          height: 16px;
          margin-top: 6px;
          display: flex;
          div {
            width: 48px;
            height: 16px;
            font-size: 12px;
            font-weight: 400;
            color: #37e8fb;
            line-height: 16px;
          }
          .procent_one {
            margin-left: 50px;
          }
          .procent_two {
            margin-left: 124px;
          }
          .procent_three {
            margin-left: 124px;
          }
        }
      }
    }
  }
}
</style>
